<template>
  <div class="ke">
    <div class="powertop">
      <!-- <router-link class="powertopli " to="/finance/onlinecommission">原佣金收入</router-link> -->
      <router-link class="powertopli " to="/yongjin/yongjinwai" v-if="checkquanxian('V0102').length > 0">佣金收入管理</router-link>

      <!-- <router-link class="powertopli " to="/yongjin/yongjinnei">系统内佣金收入</router-link> -->
      <router-link class="powertopli powertopact" to="/yongjin/yongjinchaxun" v-if="checkquanxian('V0103').length > 0">佣金收入查询</router-link>
      <!-- <router-link class="powertopli " to="/finance/onlinecommission/tkshouru">提卡费收入</router-link> -->
      <router-link class="powertopli" to="/yongjin/yongjinbaobiao" >佣金收入报表</router-link>
    </div>
    <div v-loading='loading' style="padding: 20px;">
      <div class="kflexc">
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-select clearable v-model="all.product_source" filterable  style="width: 250px;" placeholder="请选择所属渠道" >
            <el-option :label="item" :value="item"  v-for="(item,index) in qudaolists" :key="index" ></el-option>
          </el-select>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-select clearable v-model="all.product_id" filterable  style="width: 250px;" placeholder="请选择产品" >
            <el-option :label="item.name" :value="item.id"  v-for="item in chanpinlists" :key="item.id" ></el-option>
          </el-select>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-input v-model="all.plan_mobile_produced" placeholder="生产号码"></el-input>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-input v-model="all.order_id" placeholder="订单ID"></el-input>
        </div>

        <div style="margin-right: 20px; margin-bottom: 20px;">
          <el-date-picker  style="width: 450px;" v-model="times1" @change="timeschange1" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至"  start-placeholder="激活时间开始日期"  end-placeholder="激活时间结束日期"></el-date-picker>
        </div>
        <div style="margin-right: 20px; margin-bottom: 20px;">
          <el-date-picker  style="width: 450px;"  v-model="times2" @change="timeschange2" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至"  start-placeholder="结佣时间开始日期"  end-placeholder="结佣时间结束日期"></el-date-picker>
        </div>
        <div style="margin-right: 20px; margin-bottom: 20px;">
          <el-date-picker  style="width: 450px;"  v-model="times3" @change="timeschange3" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" range-separator="至"  start-placeholder="订单创建时间开始日期"  end-placeholder="订单创建时间结束日期"></el-date-picker>
        </div>

        <el-button type="danger" round  style="margin-right: 20px; margin-bottom: 20px;" @click="search()">搜索</el-button>


      </div>
      <div class="kflexc">
<!--        <el-upload ref="upload" action="#" :before-upload="uploasd" :show-file-list="false" accept=".xlsx,.xls">
           <el-button type="danger" round style="margin-right: 20px;">导入收入</el-button>
        </el-upload>
        <div @click="xiazai" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>
 -->
        <el-button type="danger" round style="margin-right: 20px;" @click="daochu()">导出当前检索内容</el-button>
      </div>
      <el-table :data="list" border style="width: 100%; margin: 20px 0;" >
        <el-table-column align='center' prop='id' label="订单ID"></el-table-column>        <el-table-column align='center' prop='created_at' label="创建时间"></el-table-column>        <el-table-column align='center' prop='product_source' label="所属渠道"></el-table-column>        <el-table-column align='center' prop='supplier_product_name' label="产品名称"></el-table-column>        <el-table-column align='center' prop='plan_mobile_produced' label="生产号码"></el-table-column>        <el-table-column align='center' prop='active_status_name' label="激活状态"></el-table-column>        <el-table-column align='center' prop='activated_at' label="激活时间"></el-table-column>        <el-table-column align='center' prop='first_commission_at' width="150px" label="第一次结佣时间"></el-table-column>        <el-table-column align='center' prop='commission_income' label="佣金收入"></el-table-column>        <el-table-column align='center' prop='fanli_expend' label="返费支出"></el-table-column>        <el-table-column align='center' prop='commission_expend' label="佣金支出"></el-table-column>
        <el-table-column align='center' prop='yingshou' label="营收结余"></el-table-column>
        <el-table-column align='center' label="操作" width="250px" >
          <template slot-scope="scope">
            <div class="kflexcc">
              <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="go('/yongjin/yongjinguize',scope.row)">收入明细</div>
              <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="logkai(scope.row)">佣金规则</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog title="收入明细" center :visible.sync="log" :close-on-click-modal="false" width="400px">
<!--      <span>佣金规则：{{scope.row.rules}} </span>
      <span v-if="scope.row.active_commission != 0">已激活，佣金{{scope.row.active_commission}}元.</span>
      <span v-if="scope.row.first_recharge_one_commission != 0">首充大于{{scope.row.first_recharge_one}}元，佣金{{scope.row.first_recharge_one_commission}}元</span>
      <span v-if="scope.row.first_recharge_two_commission != 0">或者首充大于{{scope.row.first_recharge_two}}元，佣金{{scope.row.first_recharge_two_commission}}元.</span>
      <span v-if="scope.row.recharge_amount_one_commission != 0">累计充值大于{{scope.row.recharge_amount_one}}元，佣金{{scope.row.recharge_amount_one_commission}}元</span>
      <span v-if="scope.row.recharge_amount_two_commission != 0">且累计充值大于{{scope.row.recharge_amount_two}}元，佣金{{scope.row.recharge_amount_two_commission}}元.</span>
      -->
      <div class="kflex">
        <div style="color: rgb(51, 51, 51);">上游给我的佣金规则：</div>

        <div style="color: rgb(121, 121, 121);" v-if="list2.p.commission_notes">{{list2.p.commission_notes}}</div>
        <div v-if="!list2.p.commission_notes">
          <div style="color: rgb(121, 121, 121);" v-if="list2.p == null">未配置</div>
          <div style="color: rgb(121, 121, 121);" v-if="list2.p != null">
            <span v-if="list2.p.active_commission != 0">已激活，佣金{{list2.p.active_commission}}元.</span>
            <span v-if="list2.p.first_recharge_one_commission != 0">首充大于{{list2.p.first_recharge_one}}元，佣金{{list2.p.first_recharge_one_commission}}元</span>
            <span v-if="list2.p.first_recharge_two_commission != 0">或者首充大于{{list2.p.first_recharge_two}}元，佣金{{list2.p.first_recharge_two_commission}}元.</span>
            <span v-if="list2.p.recharge_amount_one_commission != 0">累计充值大于{{list2.p.recharge_amount_one}}元，佣金{{list2.p.recharge_amount_one_commission}}元</span>
            <span v-if="list2.p.recharge_amount_two_commission != 0">且累计充值大于{{list2.p.recharge_amount_two}}元，佣金{{list2.p.recharge_amount_two_commission}}元.</span>
          </div>
        </div>

      </div>
      <div class="kflex" style="margin-bottom: 20px;">
        <div style="color: rgb(51, 51, 51);">我给下游的佣金规则：</div>
        <div style="color: rgb(121, 121, 121);" v-if="list2.c == null">未配置</div>
        <div style="color: rgb(121, 121, 121);" v-if="list2.c != null">
          <span v-if="list2.c.active_commission != 0">已激活，佣金{{list2.c.active_commission}}元.</span>
          <span v-if="list2.c.first_recharge_one_commission != 0">首充大于{{list2.c.first_recharge_one}}元，佣金{{list2.c.first_recharge_one_commission}}元</span>
          <span v-if="list2.c.first_recharge_two_commission != 0">或者首充大于{{list2.c.first_recharge_two}}元，佣金{{list2.c.first_recharge_two_commission}}元.</span>
          <span v-if="list2.c.recharge_amount_one_commission != 0">累计充值大于{{list2.c.recharge_amount_one}}元，佣金{{list2.c.recharge_amount_one_commission}}元</span>
          <span v-if="list2.c.recharge_amount_two_commission != 0">且累计充值大于{{list2.c.recharge_amount_two}}元，佣金{{list2.c.recharge_amount_two_commission}}元.</span>
        </div>
      </div>


      <div slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="log = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        times1:[],
        times2:[],
        times3:[],
        loading:false,
        list:"",
        list2:{
          p:"",
          c:""
        },
        all:{
          page:1,
          page_size:20,
          product_source:"",
          plan_mobile_produced:"",
          order_id:"",
          product_id:"",
          active_at_start:"",
          active_at_end:"",
          income_at_start:"",
          income_at_end:"",
          ocreated_at_start:"",
          ocreated_at_end:""
        },
        total:0,
        log:false,
        nowdateym:'',
        qudaolists:"",
        chanpinlists:""
      }
    },
    created() {
      this.getchanpin()

    },
    mounted() {

    },
    methods: {
      timeschange1:function(){
        if(this.times1 != null){
          this.all.active_at_start = this.times1[0]
          this.all.active_at_end = this.times1[1]
        }else{
          this.all.active_at_start = ""
          this.all.active_at_end = ""
        }
      },
      timeschange2:function(){
        if(this.times2 != null){
          this.all.income_at_start = this.times2[0]
          this.all.income_at_end = this.times2[1]
        }else{
          this.all.income_at_start = ""
          this.all.income_at_end = ""
        }
      },
      timeschange3:function(){
        if(this.times3 != null){
          this.all.ocreated_at_start = this.times3[0]
          this.all.ocreated_at_end = this.times3[1]
        }else{
          this.all.ocreated_at_start = ""
          this.all.ocreated_at_end = ""
        }
      },
      logkai:function(item){
        axios.get('/api/plan-market/income2/order/rule?id='+item.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list2 = response.data.data
              this.log = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getchanpin:function(){
        //获取销售渠道
        axios.get('/api/plan-market/product/sources')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.qudaolists = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
          axios.get('/api/gth/pdts')
            .then(response => {
              if (response.data.msg.code == 0) {
                this.chanpinlists = response.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })

      },
      go:function(url,item){
        this.$router.push({
          path:url,
          query:{
            id:item.id,
            plan_mobile_produced:item.plan_mobile_produced,
            source_id:item.source_id,
          }
        })
      },
      chakanxiangqing:function(item){
        this.getlist2(item)
        this.log = true
      },

      timeschange(){
        if(this.times && this.times.length > 0){
          this.all.start = this.times[0]
          this.all.end = this.times[1]
        }else{
          this.all.start = ''
          this.all.end = ''
        }
      },

      //统计

      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/income2/orders',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
              if(this.list.length > 0){
                this.list.forEach(item=>{
                  item.yingshou = (item.commission_income - item.fanli_expend - item.commission_expend).toFixed(2)
                })
              }

              // this.total = response.data.data.total
              // this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochu:function(){
        axios.post('/api/plan-market/income2/orders/exp',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              window.location.href = response.data.data
              // const a = document.createElement('a');
              // a.setAttribute('download', '佣金收入数据.csv');
              // a.setAttribute('href',response.data.data);
              // a.click();
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },
      //下载模板
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入返利状态数据.xlsx');
        a.setAttribute('href',location.origin + location.pathname + 'static/fanlizhuangtai.xlsx');
        a.click();
      },

    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
